<template>
  <div class="msgBox">
    <div class="title">数据统计</div>
    <div class="cardBox">
      <div class="card orange" @click="changeChart">当日数据：</div>
      <span class="card">{{ dayData.user }} 新增用户</span>
      <span class="card">{{ dayData.order }} 新增订单</span>
      <span class="card">{{ dayData.administrator }} 新增管理员</span>
    </div>
    <div class="cardBox">
      <div class="card blue" @click="changeChart">总数据：</div>
      <span class="card">{{ countData.user }} 注册用户</span>
      <span class="card">{{ countData.order }} 订单</span>
      <span class="card">{{ countData.administrator }} 管理员</span>
    </div>
  </div>
  <div ref="myChart" id="myChart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
import stateData from '../../index'
const state = reactive({
  ...stateData
})
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance()
let echarts = internalInstance.appContext.config.globalProperties.$echarts
const data1 = ref(state.data1)
const data2 = ref(state.data2)
const data3 = ref(state.data3)
const dayData = ref({
  user: 23,
  order: 23,
  administrator: 13
})
const countData = ref({
  user: 1000,
  order: 2000,
  administrator: 3515
})
// 对数据的时间进行格式化
// 计算数组中最大的值
const calMax = arr => {
  let max = 0
  for (let i = 0; i < arr.length; i++) {
    if (arr[i][1] > max) {
      max = arr[i][1]
    }
  }
  let maxval = Math.ceil(max / 10) * 10
  return maxval
}
// console.log(calMax(data1.value))
const option = {
  title: {
    text: '当日数据走势图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  // 工具栏
  toolbox: {
    show: true,
    feature: {
      // 区域缩放
      dataZoom: {
        yAxisIndex: 'none'
      },
      // 数据视图
      dataView: { readOnly: false },
      // 动态图表类型切换
      magicType: { type: ['line', 'bar'] },
      // 重置
      restore: {},
      // 导出图片
      saveAsImage: {}
    }
  },
  // xAxis: {
  //   type: 'category',
  //   boundaryGap: false,
  //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  // },
  xAxis: {
    type: 'time',
    //   刻度标签的相关设置

    axisLabel: {
      // x轴最后一个显示不全，添加下面这一属性
      showMaxLabel: true,
      formatter: function (value, index) {
        console.log(value, index)
        return echarts.format.formatTime('yyyy-MM-dd', value)
      }
    }
    //   boundaryGap: false,
    //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // 就一个Y轴时yAxis为对象
  // yAxis: {
  //   type: 'value',
  //   axisLabel: {
  //     formatter: '{value}'
  //   }
  // },
  // 两个Y轴时yAxis为数组
  yAxis: [
    {
      axisLine: {
        show: true //显示坐标轴线
      },
      type: 'value',
      name: '用户',
      axisLabel: {
        formatter: '{value}'
      },
      min: 0,
      max: calMax(data1.value) > calMax(data3.value) ? calMax(data1.value) : calMax(data3.value),
      interval:
        (calMax(data1.value) > calMax(data3.value) ? calMax(data1.value) : calMax(data3.value)) / 5,
      splitNumber: 5
    },
    {
      axisLine: {
        show: true //显示坐标轴线
      },

      type: 'value',
      name: '订单',
      axisLabel: {
        formatter: '{value}'
      },
      // 强制设置坐标轴的分割段数
      min: 0,
      max: calMax(data2.value),
      interval: calMax(data2.value) / 5,
      splitNumber: 5
    }
  ],
  series: [
    {
      name: '新注册用户',
      type: 'line',
      data: data1.value,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
      // markLine: {
      //   data: [{ type: 'average', name: 'Avg' }]
      // }
    },
    {
      // 使用右侧的Y轴
      yAxisIndex: 1,
      name: '新增订单',
      type: 'line',
      data: data2.value,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
    },
    {
      name: '新增管理员',
      type: 'line',
      data: data3.value,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
    }
  ]
}
const data4 = ref(state.data4)
const data5 = ref(state.data5)
const data6 = ref(state.data6)
const option1 = {
  title: {
    text: '年度数据走势图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  // 工具栏
  toolbox: {
    show: true,
    feature: {
      // 区域缩放
      dataZoom: {
        yAxisIndex: 'none'
      },
      // 数据视图
      dataView: { readOnly: false },
      // 动态图表类型切换
      magicType: { type: ['line', 'bar'] },
      // 重置
      restore: {},
      // 导出图片
      saveAsImage: {}
    }
  },
  // xAxis: {
  //   type: 'category',
  //   boundaryGap: false,
  //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  // },
  xAxis: {
    type: 'time',
    //   刻度标签的相关设置
    axisLabel: {
      formatter: function (value, index) {
        console.log(value, index)
        return echarts.format.formatTime('yyyy', value)
      }
    }
    //   boundaryGap: false,
    //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // 就一个Y轴时yAxis为对象
  // yAxis: {
  //   type: 'value',
  //   axisLabel: {
  //     formatter: '{value}'
  //   }
  // },
  // 两个Y轴时yAxis为数组
  yAxis: [
    {
      type: 'value',
      name: '用户',
      axisLabel: {
        formatter: '{value}'
      },
      min: 0,
      max: calMax(data4.value) > calMax(data6.value) ? calMax(data4.value) : calMax(data6.value),
      interval:
        (calMax(data4.value) > calMax(data6.value) ? calMax(data4.value) : calMax(data6.value)) / 5,
      splitNumber: 5
    },
    {
      type: 'value',
      name: '订单',
      axisLabel: {
        formatter: '{value}'
      },
      // 强制设置坐标轴的分割段数
      min: 0,
      max: calMax(data5.value),
      interval: calMax(data5.value) / 5,
      splitNumber: 5
    }
  ],
  series: [
    {
      name: '新注册用户',
      type: 'line',
      data: data4.value,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
      // markLine: {
      //   data: [{ type: 'average', name: 'Avg' }]
      // }
    },
    {
      // 使用右侧的Y轴
      yAxisIndex: 1,
      name: '新增订单',
      type: 'line',
      data: data5.value,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
    },
    {
      name: '新增管理员',
      type: 'line',
      data: data6.value,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      }
    }
  ]
}
let myChart = null
let dom = null
onMounted(() => {
  dom = document.getElementById('myChart')
  myChart = echarts.init(dom) // 初始化echarts实例
  //   const option = {
  //     xAxis: {
  //       type: 'category',
  //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //     },
  //     yAxis: {
  //       type: 'value'
  //     },
  //     series: [
  //       {
  //         data: [820, 932, 901, 934, 1290, 1330, 1320],
  //         type: 'line',
  //         smooth: true
  //       }
  //     ]
  //   }

  // 设置实例参数
  myChart.setOption(option)
  myChart.on('click', changeDayData)
})
const changeDayData = item => {
  console.log(item)
  if (!item.componentSubType === false) {
    dayData.value.user = data1.value[item.dataIndex][1]
    dayData.value.order = data2.value[item.dataIndex][1]
    dayData.value.administrator = data3.value[item.dataIndex][1]
  }
}
// 点击切换chart配置
const changeChart = e => {
  if (e.target.innerText === '总数据：') {
    myChart = echarts.init(dom)
    myChart.off('click')
    myChart.setOption(option1)
  }
  if (e.target.innerText === '当日数据：') {
    myChart = echarts.init(dom)
    myChart.on('click', changeDayData)
    myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.msgBox {
  width: 100%;
  height: 200px;
  .title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
  }
  .cardBox {
    display: flex;
    margin-top: 20px;
  }
  .card {
    width: 180px;
    height: 30px;
    background-color: rgb(218, 216, 216);
    text-align: center;
    line-height: 30px;
    margin-right: 20px;
    border-radius: 5px;
  }
  .orange {
    background-color: orange;
    color: white;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
  }
  .blue {
    background-color: rgb(75, 178, 218);
    color: white;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
  }
}
</style>
